import React, { useState } from 'react'
import { Input, Button, message } from 'antd'
import { addCommentReply } from '@/api'
import style from './index.module.scss'
import event from '@/utils/event'
export default ({
  comment,
}: React.PropsWithChildren<{ comment: BlogCommentList }>) => {
  const [val, setVal] = useState('')
  const [loading, setLoading] = useState(false)
  const submit = async () => {
    setLoading(true)
    const { status, msg } = await addCommentReply({
      blogId: comment.blogId,
      commentId: comment.commentId,
      reply: val,
    })
    setLoading(false)
    if (!status) return message.warning(msg)
    event.emit('submitReply', val)
    message.success('回复成功')
  }
  return (
    <div
      className={`${style.row} ${val === '' ? '' : style.an} ${
        loading ? style.loading : ''
      }`}
    >
      <Input.TextArea
        placeholder="回复评论 shift+enter换行"
        autoSize={{ maxRows: 6 }}
        className={style.int}
        onPressEnter={(e) => {
          // 换行
          if (e.shiftKey) return
          e.preventDefault()
          submit()
        }}
        onChange={({ target: { value } }) => setVal(value)}
      />
      <div className={style.btn_row}>
        <Button
          onClick={submit}
          loading={loading}
          className={style.btn}
          type="primary"
        >
          提交
        </Button>
      </div>
    </div>
  )
}
